<template>
  <view class="">
    <view class="header">
        <view style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: -70rpx;">
          <view class="">
            成功邀请50人即可获得终身免费使用权
          </view>
          <view class="">(价值4999元)</view>
        </view>
        
       
    </view>
    <view class="task-box">
      <view class="" style="width: 90%;margin: auto;">
        <view class="task-title">
          <span style="font-size: 35rpx;">已完成</span>
          <span style="margin-left: 10rpx;font-size: 35rpx;">{{zsun}}人</span>
        </view>
        <view class="progress-box">
        	<progress :percent="pgList[0]" show-info stroke-width="10"  />
        </view>
        <view class="" style="">
          <view class="ivn-share">
            <view class="yqbox">
              <image class="yqfriend" src="https://www.iwangbang.com/skin/wx_mp_aixz/yqfriend.png" mode=""></image>
            </view>
            <view class="" style="margin-left: 15rpx;width: 80%;">
              <view class="inuer-box"><view style="font-size: 32rpx;font-weight: 900;">邀请新用户</view><view class=""><button class="yqbutton" open-type="share" @click="getinvite">去邀请</button></view></view>
              <view class="inuer-text">邀请50人后即可领取！</view>
            </view>
          </view>
        
          
          <view class="getbox">
            <button type="primary" class="getbtn" @click="getforeverVip" :disabled="exptime > 1800 ? true : false">{{exptime > 1800 ? '已获得永久使用权' :'立即领取'}}</button>
          </view>

          
          
          <view class="vipbox" @click="openvip" v-if="judgext">
            不想做任务了, 立即开通会员
          </view>
          <view class="vipbox" @click="relationkf" v-else>
            我不想任务了，联系客服
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
   
    onLoad() {
      this.getnumberData()
      this.getnumberpeo()
    },
    onShareTimeline:function(res){
          return {
            title: '小帮观影，我的AI影评顾问',
            imageUrl:'https://www.iwangbang.com/skin/wx_mp_xbgy/share.jpg',
            query: "inviteCode="+uni.getStorageSync('wbyun_icode')
          }
        },
    onShow() {
      let ua = uni.getSystemInfoSync().platform;
      
      if(ua == 'ios') {
        this.judgext = false
      }
      console.log(ua);
      uni.showShareMenu({
        title:'小帮观影，我的AI影评顾问',
        imageUrl:'/static/logo.png',
        path:'/pages/index/index'
      })
      
    },
    onShareAppMessage(res) {
      console.log(res);
      console.log(uni.getStorageSync('wbyun_icode'));
      return {
            title: '小帮观影，我的AI影评顾问',
            imageUrl:'https://www.iwangbang.com/skin/wx_mp_xbgy/share.jpg',
            path: '/pages/index/index?inviteCode=' + uni.getStorageSync('wbyun_icode')
          }
    },
    data(){
      return {
        timer:"",
        pgList:[0],
        zsun:0,
        exptime:0,
        judgext:true
      }
    },
    methods:{
      getinvite() {
        uni.share({
        	provider: "weixin",
        	scene: "WXSceneSession",
        	type: 0,
          title:'小帮观影，我的AI影评顾问',   
          imageUrl:'/static/logo.png',
        	summary: "小帮观影，我的AI影评顾问",
          miniProgram :{
            id:'wx36bee4da16f3faa2',
            path:"/pages/index/index?inviteCode=" + uni.getStorageSync('wbyun_icode'),
            type:1
          },
        	success: function (res) {
        		console.log("success:" + JSON.stringify(res));
        	},
        	fail: function (err) {
        		console.log("fail:" + JSON.stringify(err));
        	}
        });
      },
      getnumberData() {
          uni.request({
          	url: getApp().globalData.apiDomain+'/vip/getVIPEndTime',
          	method: 'POST',
          	header: {
          		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
          		'token': uni.getStorageSync('wbyun_token'),
              'wbapp':'weixin_mp_xbgy'
          	},
          	data: {},
          	dataType: 'json',
          	success:  res => {
              console.log(res);
          		if (res['data']['code'] == 200) {
               this.timer = res.data.datas
                let jsc = Date.parse(res.data.datas) - Date.now()
                this.convertTimestamp(jsc)
                
          			return;
          		} else { 
          			uni.showToast({
          				title: res['data']['msg'],
          				icon: 'none'
          			});
          		}
          	},
          	fail: () => {},
          	complete: () => {
          	}
          });
      },
      
      convertTimestamp(timestamp) {
           let timediff =  timestamp / 1000
           let hours = parseInt(timediff / 3600);
           this.exptime =  Math.ceil(hours / 24)
           console.log(this.exptime);
      },
      getnumberpeo(){
        uni.request({
        	url: getApp().globalData.apiDomain+'invite/myinvite',
        	method: 'POST',
        	header: {
        		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        		'token': uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
        	},
        	data: {},
        	dataType: 'json',
        	success:  res => {
            console.log(res);
        		if (res['data']['code'] == 200) {
              console.log(res.data.datas.list.length);
              this.zsun = res.data.datas.list.length
              let sun = res.data.datas.list.length * 2 
              this.pgList =[sun]
        			return;
        		} else { 
        			uni.showToast({
        				title: res['data']['msg'],
        				icon: 'none'
        			});
        		}
        	},
        	fail: () => {},
        	complete: () => {
        	}
        });
      },
      openvip() {
        uni.navigateTo({
        	url: '/pagesB/subson/subson/purchase'
        })
      },
      relationkf() {
        uni.navigateTo({
        	url: '/pagesB/subson/subson/opinion'
        })
      },
      getforeverVip() {
        uni.request({
        	url: getApp().globalData.apiDomain+'vip/ktyjvip',
        	method: 'POST',
        	header: {
        		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        		'token': uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
        	},
        	data: {},
        	dataType: 'json',
        	success:  res => {
            console.log(res);
        		if (res['data']['code'] == 200) {
              uni.showToast({
              	title: res['data']['msg'],
              	icon: 'none'
              });
        			return;
        		} else { 
        			uni.showToast({
        				title: res['data']['msg'],
        				icon: 'none'
        			});
        		}
        	},
        	fail: () => {},
        	complete: () => {
        	}
        });
      },

      }
  }
</script>

<style>
  body {
    background-color: rgb(247,247,247);
  }
  .header {
    width: 100%;
    height: 300rpx;
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 35rpx;
    background-color: #4193FE;
  }
  .sky {
    font-size: 70rpx;
    text-align: center;
    color: red;
    font-weight: 700;
    width: 80rpx;
  }
  .sky2 {
    width: 80rpx;
    font-size: 70rpx;
    text-align: center;
    color: red;
    font-weight: 700;
    
  }
  .task-box {
    width: 90%;
    height: 700rpx;
    background-color: #fff;
    margin: auto;
    margin-top: -85rpx;
    border-radius: 20rpx;
  }
  .task-title {
    padding-top: 45rpx;
    margin-bottom: 50rpx;
  }
 
  .ivn-share {
    width: 100%;
    height: 270rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
  }
 .yqbox {
   width: 120rpx;
   height: 120rpx;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgb(249,247,243);
 }
  .yqfriend {
    width: 80rpx;
    height: 80rpx;
  }
  .inuer-text {
    font-size: 28rpx;
    color: #bababa;
  }
  .inuer-box {
    
    display: flex;
    justify-content: space-between;
  }
  .yqbutton {
    width: 120rpx;
    height: 50rpx;
    font-size: 25rpx;
    line-height: 50rpx;
    padding: 0;
    background-color: #4193FE;
    color: #fff;
    border: 0;
    border-radius: 30rpx;
  }
  .accomplish {
    
    font-size: ;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .vipbox {
    width: 100%;
    margin-top: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#4193FE ;
  }

  .getbox {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .getbtn {
    width: 100%;
   
    border: 0 !important;
    color: #fff;
    background-color: #4193FE !important;
    
  }
</style>